<template>
    <!-- 提示弹窗 -->
    <uni-popup ref="popup" :mask-click="false">
        <div class="container">
            <image class="title-image" src="https://ustatic.hudongmiao.com/miao/activity/202505/yuanbao.png"
                mode="scaleToFill"></image>
            <div class="score-container">
                <div class="title"><text class="title-text">昨日欢乐赛获得积分：{{ scoreAmount }}</text></div>
                <div class="head">
                    <text class="task-field">任务</text>
                    <image class="bar" src="https://ustatic.hudongmiao.com/miao/activity/202505/barIcon.png">
                    </image>
                    <text class="score-field">获得积分</text>
                </div>
                <scroll-view class="container-scroll" scroll-y enable-flex :show-scrollbar="false">
                    <div class="item" v-for="item ,index in activity202505Store.yesterdayScoreInfo" :key="index">
                        <text class="task-text">{{item.title}}</text>
                        <text class="score-text">{{item.score}}</text>
                    </div>
                </scroll-view>
            </div>
            <div class="i-know" @click="close">
                <text class="text">我知道了</text>
            </div>
        </div>
    </uni-popup>
</template>

<script setup lang="ts">
import { useActivity202505 } from "@/stores/activity-202505-store";
const activity202505Store = useActivity202505();
const popup = ref<UniHelper.UniPopupInstance>();
const scoreAmount = computed(() => {
    if(!activity202505Store.yesterdayScoreInfo) return 0;
    return  activity202505Store.yesterdayScoreInfo.reduce((sum, item) => sum + parseInt(item.score), 0);
});


/** 弹窗打开 */
const open = () => {
  if (!popup.value?.open) return;
  popup.value?.open();
};

/** 弹窗关闭 */
const close = () => {
  if (!popup.value?.close) return;
  popup.value?.close();
  emit('popupClose');
};

defineExpose({
  open,
  close,
});

const emit = defineEmits<{(event: 'clickRule'): void,
  (event: 'popupClose'): void
}>();

</script>

<style scoped lang="scss">
.container {
    position: relative;

    width: 90vw;
    max-height: 80vh;
    transform: translateY(10vh);

    background: #FFFFFF;
    box-shadow: 0px 7 19px 0px rgba(0, 0, 0, 0.3);
    border-radius: 41rpx 41rpx 41rpx 41rpx;

    padding: 22rpx 16rpx 24rpx;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    @media (min-aspect-ratio: 330/568) {
        max-height: 700rpx;
    }

    .container-bg {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;

        width: 100%;
        height: 100%;
    }

    .score-container {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }

    .title-image {
        position: absolute;
        top: -185rpx;
        z-index: 100;
        width: 506rpx;
        height: 187rpx;
    }

    .title {
        background: #FFFBDD;
        border-radius: 32rpx 32rpx 32rpx 32rpx;
        width: 565rpx;
        height: 63rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        .title-text {
            font-weight: 500;
            font-size: 34rpx;
            color: #9B642E;
            line-height: 37rpx;
            text-align: center;
            font-style: normal;
            text-transform: none;
        }
    }

    .head {
        margin-top: 20rpx;
        width: 565rpx;
        height: 63rpx;
        background-color: #FAA838;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        border-radius: 20rpx 20rpx 0 0;

        .task-field {
            height: 37rpx;
            width: 380rpx;
            font-weight: 500;
            font-size: 30rpx;
            color: #FFFFFF;
            line-height: 37rpx;
            text-align: center;
            font-style: normal;
            text-transform: none;
        }

        .bar {
            width: 6rpx;
            height: 32rpx;
        }

        .score-field {
            height: 37rpx;
            margin-left: 20rpx;
            font-weight: 500;
            font-size: 30rpx;
            color: #FFFFFF;
            line-height: 37rpx;
            text-align: center;
            font-style: normal;
            text-transform: none;
        }
    }

    .container-scroll {
        max-height: 60vh;
        padding-bottom: 1px;
        width: 565rpx;
        display: flex;
        background-color: #FAA838;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;

        @media (min-aspect-ratio: 330/568) {
            max-height: 400rpx;
        }

        .item {
            border-top: 1px solid #FAA838;
            width: 565rpx;
            height: 63rpx;
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: flex-start;

            .task-text {
                width: 380rpx;
                height: 63rpx;
                font-weight: 500;
                font-size: 22rpx;
                color: #9B642E;
                line-height: 63rpx;
                text-align: center;
                font-style: normal;
                text-transform: none;
                border-right: 1px solid #FAA838;
            }

            .score-text {
                width: 185rpx;
                height: 63rpx;
                font-weight: 500;
                font-size: 22rpx;
                color: #9B642E;
                line-height: 63rpx;
                text-align: center;
                font-style: normal;
                text-transform: none;
            }
        }
    }


    .i-know {
        margin-top: 20rpx;
        width: 319rpx;
        height: 95rpx;
        background-image: url("https://ustatic.hudongmiao.com/miao/activity/202505/yellowButton2.png");
        background-size: 319rpx 95rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        .text {
            font-weight: 500;
            font-size: 34rpx;
            color: #FFFFFF;
            line-height: 49rpx;
            text-align: center;
            font-style: normal;
            text-transform: none;
        }
    }

}
</style>